<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:350px;height:350px;position: relative;}

        .middleBox{width:350px;height:350px;position: relative;}
        .middleBox span{position:absolute;left:0;top:0;background:rgba(255,100,100,0.6);display:none;}
        .middleBox em{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1}

        .bigBox{width:350px;height:350px;position:absolute;left: 400px;top:0;overflow: hidden;display:none;}
        .bigBox img{position:absolute;left:0;top:0;}

        .list{width:330px;height:50px;padding:10px;position:relative;margin: 10px 0;overflow: hidden;}
        .list .listImg{width:666px;}
        .list .listImg img{float: left;margin: 0 10px;border:solid 2px transparent;cursor: pointer;}
        .list .listImg img.active{border-color:blue;}
        .list span{position: absolute;top:0;width:20px;height:70px;line-height:70px;font-size:12px;text-align: center;background: rgba(200,200,200,0.6);}
        .list span.left{left:0}
        .list span.right{right:0}
    </style>
</head>
<body>
    <div class="box">
        <div class="showBox">
            <div class="middleBox">
                <img src="./imgs/m0.jpg" alt="">
                <span></span>
                <em></em>
            </div>
            <div class="list">
                <div class="listImg">
                    <img class="active" src="./imgs/s0.jpg" alt="">
                    <img src="./imgs/s1.jpg" alt="">
                    <img src="./imgs/s2.jpg" alt="">
                    <img src="./imgs/s0.jpg" alt="">
                    <img src="./imgs/s1.jpg" alt="">
                    <img src="./imgs/s2.jpg" alt="">
                    <img src="./imgs/s0.jpg" alt="">
                    <img src="./imgs/s1.jpg" alt="">
                    <img src="./imgs/s2.jpg" alt="">
                </div>
                <span class="left">左</span>
                <span class="right">右</span>
            </div>
        </div>
        <div class="bigBox">
            <img src="./imgs/l0.jpg" alt="">
        </div>
    </div>
</body>
<script>

    function SmallToBig(){
        this.mBox = document.querySelector(".middleBox");
        this.mImg = document.querySelector(".middleBox img");
        this.mSpan = document.querySelector(".middleBox span");
        this.bBox = document.querySelector(".bigBox");
        this.bImg = document.querySelector(".bigBox img");

        this.imgs = document.querySelectorAll(".list img");
        this.index = 0;
        this.imgArr = [{
            large:"./imgs/l0.jpg",
            middle:"./imgs/m0.jpg",
            small:"./imgs/s0.jpg",
        },{
            large:"./imgs/l1.jpg",
            middle:"./imgs/m1.jpg",
            small:"./imgs/s1.jpg",
        },{
            large:"./imgs/l2.jpg",
            middle:"./imgs/m2.jpg",
            small:"./imgs/s2.jpg",
        },{
            large:"./imgs/l0.jpg",
            middle:"./imgs/m0.jpg",
            small:"./imgs/s0.jpg",
        },{
            large:"./imgs/l1.jpg",
            middle:"./imgs/m1.jpg",
            small:"./imgs/s1.jpg",
        },{
            large:"./imgs/l2.jpg",
            middle:"./imgs/m2.jpg",
            small:"./imgs/s2.jpg",
        },{
            large:"./imgs/l0.jpg",
            middle:"./imgs/m0.jpg",
            small:"./imgs/s0.jpg",
        },{
            large:"./imgs/l1.jpg",
            middle:"./imgs/m1.jpg",
            small:"./imgs/s1.jpg",
        },{
            large:"./imgs/l2.jpg",
            middle:"./imgs/m2.jpg",
            small:"./imgs/s2.jpg",
        }]

        this.addEvent();
    }
    SmallToBig.prototype.addEvent = function(){
        const that = this;
        this.mBox.addEventListener("mouseover", function(){
            that.show()
        })
        this.mBox.addEventListener("mouseout", function(){
            that.hide()
        })
        this.mBox.addEventListener("mousemove", function(){
            that.move()
        })
        // 给list中的每个图片绑定事件
        this.imgs.forEach((val,idx)=>{
            val.onclick = function(){
                // 清除之前的高亮
                that.imgs[that.index].className = "";
                // 给当前点击的添加高亮
                this.className = "active";
                // 根据当前遍历到的元素的索引，读取数据，获取中图和大图，设置给指定img标签的src属性
                that.bImg.src = that.imgArr[idx].large;
                that.mImg.src = that.imgArr[idx].middle;
                // 将本次点的索引，设置为下一次的上一个
                that.index = idx;
            }
        })
    }
    SmallToBig.prototype.show = function(){
        this.mSpan.style.display = "block";
        this.bBox.style.display = "block";
        this.getSize();
        this.mSpan.style.width = this.bBoxW / this.bImgW * this.mBoxW + "px";
        this.mSpan.style.height = this.bBoxH / this.bImgH * this.mBoxH + "px";
    }
    SmallToBig.prototype.getSize = function(){
        this.bBoxW = this.bBox.offsetWidth;
        this.bBoxH = this.bBox.offsetHeight;
        this.bImgW = this.bImg.offsetWidth;
        this.bImgH = this.bImg.offsetHeight;
        this.mBoxW = this.mBox.offsetWidth;
        this.mBoxH = this.mBox.offsetHeight;
    }
    SmallToBig.prototype.hide = function(){
        this.mSpan.style.display = "none";
        this.bBox.style.display = "none";
    }
    SmallToBig.prototype.move = function(eve){
        const e = eve || window.event;
        let l = e.offsetX - this.mSpan.offsetWidth/2;
        let t = e.offsetY - this.mSpan.offsetHeight/2;
        if(l<0) l=0;
        if(t<0) t=0;
        if(l>this.mBoxW-this.mSpan.offsetWidth){
            l=this.mBoxW-this.mSpan.offsetWidth;
        }
        if(t>this.mBoxH-this.mSpan.offsetHeight){
            t=this.mBoxH-this.mSpan.offsetHeight;
        }
        this.mSpan.style.left = l + "px";
        this.mSpan.style.top = t + "px";
        const x = l / (this.mBoxW-this.mSpan.offsetWidth);
        const y = t / (this.mBoxH-this.mSpan.offsetHeight);
        this.bImg.style.left = - x * (this.bImgW-this.bBoxW) + "px";
        this.bImg.style.top = - y * (this.bImgH-this.bBoxH) + "px";
    }
    
    new SmallToBig();

    
</script>
</html>